<script setup>
  const arr = [11, 22, 33, 44, 55]
  const goodsList = [
    {id: 1, name: "篮球", price: 15},
    {id: 2, name: "足球", price: 199},
    {id: 3, name: "羽毛球", price: 158},
    {id: 4, name: "乒乓球", price: 59},
    {id: 5, name: "棒球", price: 256},
    {id: 6, name: "网球", price: 799},
    {id: 7, name: "台球", price: 35},
    {id: 8, name: "保龄球", price: 299},
  ]
  const user = {
    name: "careathers",
    age: 18,
    position: "CEO"
  }
</script>

<template>
  <div>
    <!-- 1.基于数组生成列表 -->
    <h3>基于数组生成列表</h3>
    <ul>
      <li v-for="item, index in arr">
        <p>下标：{{ index }}， 元素：{{ item }}</p>
      </li>
    </ul>

    <!-- 2.基于对象数组生成列表 -->
     <h3>基于对象数组生成列表</h3>
    <div class="container">
      <div class="item" v-for="item, index in goodsList">
        <p>名称：<br>{{ item.name }}</p>
        <p>价格：{{ item.price }}</p>
      </div>
    </div>

    <!-- 3.基于对象生成列表 -->
    <h3>基于对象生成列表</h3>
    <ol>
      <li v-for="value, key, index in user">
        键：{{ key }}，值：{{ value }}，下标：{{ index }}
      </li>
    </ol>

    <!-- 4.基于数字生成列表 -->
    <h3>基于数字生成列表</h3>
    <ul>
      <li v-for="item, index in 10">
        元素：{{ item }}，下标：{{ index }}
      </li>
    </ul>
  </div>
</template>

<style>
  * {
    box-sizing: border-box;
  }
  .container {
    /* 1.弹性布局 */
    width: 300px;
    height: 240px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    /* 2.调整边框 */
    border: 3px solid #63a808fa;
    box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, 0.5);
    background-color: #fff;
    border-radius: 1em;
    /* 3.调整内边距 */
    padding: 5px;
  }
  .container .item {
    /* 1.弹性布局 */
    width: 60px;
    height: 100px;
    /* 2.调整边框 */
    border: 1px solid #000;
    box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    background-color: #ccc;
    /* 3.调整字体 */
    font-size: 10px;
    /* 4.调整内边距 */
    padding: 2px;
  }
</style>
